<!--
 * @Author: linZeJian
 * @Date: 2022-08-24 10:53:55
 * @LastEditors: linZeJian
 * @LastEditTime: 2022-09-01 13:56:38
 * @Description:
-->
<template>
  <div v-if="column.display">
    <van-field
      clickable
      :name="column.prop"
      input-align="right"
      right-icon="arrow"
      v-model="currentValue"
      :label="column.label"
      :placeholder=" column.placeholder ? column.placeholder : '请选择' + column.label"
      :disabled="column.disabled"
      :required="column.required"
      :style="column.readonly || column.disabled || column.detail ? 'pointer-events: none;': ''"
      :rules="[{ required: column.required }]"
      @click="show = true"
      readonly
    />
    <van-popup v-model:show="show" round position="bottom">
<!--      <van-cascader-->
<!--        v-model="cascaderValue"-->
<!--        :columns="columns"-->
<!--        :field-names="fieldNamesProp "-->
<!--        @close="show = false"-->
<!--        @finish="onFinish"-->
<!--      />-->

      <van-field clickable v-model.trim="keyvalue" left-icon="search" placeholder="搜索" @input="search"></van-field>
      <van-picker
              show-toolbar
              :columns="filterList"
              @cancel="show = false"
              @confirm="onConfirm"
              value-key="label"
      />

    </van-popup>
  </div>
</template>

<script>
  import { columnCallApi} from '@/framework-core/utils/util'
export default {
  name: "avant-cascader",
  props: ['column','modelValue'],
  inject: ['getViewFormData'],
  mounted() {
      if (this.getViewFormData) {
          this.formData = this.getViewFormData()
      }
      this.$watch("column.dicData", (newVal, oldVal) => {
          this.init();
      })

      // this.$watch("formData." + this.column.prop, (newVal, oldVal) => {
      //     alert(JSON.stringify(newVal))
      //     if (!this.column.dicData || this.column.dicData.length==0) {
      //         debugger
      //         this.reloadData()
      //     }
      // })

      this.$watch("formData." + this.column.parentProp, (newVal, oldVal) => {
          // alert("newVal"+newVal+"oldVal"+oldVal)
          // alert(this.column.parentProp+":"+JSON.stringify(newVal))
          // setTimeout=()=>{
          //
          // }
          setTimeout(async () => {
              this.reloadData(newVal)
          }, 1000);


      }, {
          immediate: true,
          deep: true
      })

  },

  computed: {
    currentValue () {
      return   this.comValueTextObj[this.modelValue]
    },
  },

  data() {
    return {
      show: false,
      comValueTextObj: {},
      cascaderValue: "",
      formData:{},
      // 搜索框的关键字
      keyvalue: "",
      // 过滤数组
      filterList: [],
    };
  },
  created() {
    this.search();
  },
  methods: {
      reloadData(newVal) {
          columnCallApi(this.column, "", newVal, (arr) => {
              if (!this.column.dicData) {
                  this.column.dicData = arr
              }
              this.init();
          });
      },
      init() {
          var labelProps = this.column.props ? this.column.props["label"] || "label" : "label";
          var valueProps = this.column.props ? this.column.props["value"] || "value" : "value";

          //this.column.props["text"] = this.column.props["label"]||"label"
          this.column.dicData.forEach((item) => {
              item.text = item[labelProps];
              item.value = item[valueProps];
              this.comValueTextObj[item[valueProps]] = item[labelProps];
          });
          this.search();
      },
      // 输入框搜索方法
      search() {
          // 对过滤数组进行操作，返回符合条件的数组
          if(!this.column.dicData){
              this.filterList = [];
              return
          }
          this.filterList = this.column.dicData.filter((params) => {
              return this.keyvalue == "" || params.text.includes(this.keyvalue);
          });
      },
      onConfirm(data) {
          //debugger
          var myValue = data.selectedValues[0];
          this.$emit('update:modelValue', myValue);
          if (this.formData) {
              this.formData[this.column.prop] = myValue;
          }
          this.show = false;
      },

      // // 全部选项选择完毕后，会触发 finish 事件
      // onFinish({selectedcolumns}) {
      //   // this.show = false;
      //   // this.comValue = selectedcolumns.map((column) => column.text).join("/");
      //
      //   // 处理返回值，是否全部路径showAllLevels: true，路径拼接符separator: "/",
      //   console.log('selectedcolumns', selectedcolumns)
      //   this.show = false;
      //   // console.log('this.props', this.props);
      //   let text = this.props.text;
      //   let showAllLevels = this.column.showAllLevels;
      //   let separator = this.column.separator || "/";
      //   if (showAllLevels) {
      //     this.comValue = selectedcolumns
      //             .map((column) => column[text])
      //             .join(separator);
      //   } else {
      //     this.comValue = selectedcolumns.slice(-1)[0][text];
      //   }
      //   console.log('this.cascaderValue', this.cascaderValue)
      // },
  },
};
</script>

<style scoped>
:deep(.van-field__control) {
  text-align: right;
}
</style>
